<template>
  <hr />
  <hr style="border: none; height: 4px; color: #333; background-color: #333; width:50%;margin: 20px auto; " />
  <div class="inspirational-notice">@ 励志小公告</div>
  

  <!-- 卡片表单   -->
  <form class="form-container">
    <div class="card-grid">
      <div class="card">
        <img src="../../assets/29.jpg" class="card-img-top" alt="..." />
        <div class="card-body">
          这个是世界上没有天才，所谓的天才只是比普通人多了百分之一的天赋。如果这个天赋运用不好，那么他就可能变成百分之十的累赘。
        </div>
      </div>

      <div class="card">
        <img src="../../assets/30.jpg" class="card-img-top" alt="..." />
        <div class="card-body">
          人必须像天上的星星，永远很清楚地看出一切希望和愿望的火光，在地上永远不熄地燃烧着火光。
        </div>
      </div>
      <div class="card">
        <img src="../../assets/31.jpg" class="card-img-top" alt="..." />
        <div class="card-body">
          人若在面临抉择而无法取舍的时候，应该选择自己尚未经验过的那一个。
        </div>
      </div>
      <div class="card">
        <img src="../../assets/38.png" class="card-img-top" alt="..." />
        <div class="card-body">
          拥有责任心就拥有了善良，它需要觉悟，就像泥土中的种子需要阳光雨露的滋润一般。——朱小茜
        </div>
      </div>
    </div>
  </form>
  
</template>  
  
<script>
export default {};
</script>  
  
<style scoped>
/* 字体样式 */
.inspirational-notice {
  /* 设置字体大小 */
  font-size: 20px;

  /* 设置字间距 */
  letter-spacing: 2px;

  /* 设置字体背景 */
  background-color: #a8a1a1; /* 背景颜色为浅灰色 */
  padding: 10px; /* 内边距，使文本不会紧贴在边框上 */

  /* 居中显示 */
  text-align: center; /* 文本水平居中 */
  margin: 0 auto; /* 如果div有固定宽度，这将使其水平居中 */

  /* 设置颜色 */
  color: #333; /* 文字颜色为深灰色 */

  /* （可选）设置div宽度（如果需要） */
  width: 20%; /* 宽度为父元素宽度的50% */
  border-radius: 50%;/* 其他可能的样式，如 border-radius 圆角等 */
 
}





/* 表单样式 */
.form-container {
  /* 移除表单的默认边框 */
  border: none;
  /* 其他样式 */
}

.card-grid {
  display: grid;
  /* 三行两列布局，第一行一个单元格跨两列 */
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto auto; /* 也可以指定具体的行高 */
  grid-gap: 2rem; /* 单元格之间的间隙 */
  justify-items: center; /* 水平居中 */
  align-items: start; /* 垂直顶部对齐 */
  /* 根据需要可以添加 max-width, padding 等其他样式 */

}

.card {
  width: 30rem; /* 卡片宽度 */
  height: 20rem;
  /* 根据需要设置高度，或者使用padding等属性 */
  border: 10px solid rgb(170, 170, 234); /* 边框加粗到4px */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 5%; /* 注意：使用百分比可能导致不同尺寸的卡片圆角效果不一致 */
  overflow: hidden; /* 确保图片不会溢出容器 */
  /* 其他可能的样式，如 border-radius 圆角等 */
 
}

.card-img-top {
  width: 100%; /* 图片宽度与卡片宽度相同 */
  height: 70%; /* 图片高度自动以保持比例 */
  
  /* border-bottom-left-radius 和 border-bottom-right-radius 默认是 0，所以不需要显式设置 */
}

.card-body {
  padding: 8px; /* 添加内边距使文本与图片分开 */
}
</style>